<template>
  <div>
    <ElDivider>表单设置</ElDivider>
    <ElForm :model="formProps" label-width="80px">
      <ElFormItem prop="labelWidth" label="标签宽度">
        <ElInputNumber
          v-model="formProps['labelWidth']"
          style="width: 100%"
          controls-position="right"
          :precision="0"
        ></ElInputNumber>
      </ElFormItem>
      <ElFormItem prop="size" label="组件大小">
        <ElRadioGroup v-model="formProps['size']">
          <ElRadioButton label="large">large</ElRadioButton>
          <ElRadioButton label="default">default</ElRadioButton>
          <ElRadioButton label="small">small</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem prop="labelPosition" label="对齐方式">
        <ElRadioGroup v-model="formProps['labelPosition']">
          <ElRadioButton label="left">left</ElRadioButton>
          <ElRadioButton label="right">right</ElRadioButton>
          <ElRadioButton label="top">top</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem prop="labelPosition" label="表单栅格">
        <ElRadioGroup v-model="formProps['span']">
          <ElRadioButton label="24">一列</ElRadioButton>
          <ElRadioButton label="12">二列</ElRadioButton>
          <ElRadioButton label="8">三列</ElRadioButton>
          <ElRadioButton label="6">四列</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem prop="disabled" label="表单禁用">
        <ElSwitch v-model="formProps['disabled']" :inline-prompt="true" active-text="是" inactive-text="否"></ElSwitch>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts" name="FormPanel">
import { ElDivider, ElForm, ElFormItem, ElInputNumber, ElRadioGroup, ElRadioButton, ElSwitch } from "element-plus";
import { computed } from "vue";
const props = defineProps({
  designer: {
    type: Object
  }
});

const formProps = computed(() => props.designer!.widget!.formProps);
</script>

<style scoped></style>
